<template>
  <el-dialog v-model="isModalVisible" width="40%" :append-to-body="true" @close="closeModal" title="举报处理">
    <div class="feedback-info">
      <el-form-item label="举报类型:">
        <el-input v-model="feedbackInfo.feedbackTypeText" disabled />
      </el-form-item>
      <el-form-item label="举报内容:">
        <el-input v-model="feedbackInfo.content" disabled />
      </el-form-item>
      <el-form-item label="举报附件:">
        <MultiImageUpload v-model="feedbackInfo.files" disabled :showTip="false"
          :limit="feedbackInfo.files?.length ?? 1" />
      </el-form-item>
      <el-form-item label="处理状态:">
        <el-radio-group v-model="status" size="small">
          <el-radio v-for="item in Object.values(statusList)" :key="item.value" :value="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="处理备注">
        <el-input v-model="feedbackInfo.reason" type="textarea" :rows="2" maxlength="200" show-word-limit />
      </el-form-item>
    </div>
    <template #footer>
      <div class="dialog-footer flex">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="closeModal">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import FeedbackAPI from "@/api/feedback";
import { ElMessage } from "element-plus";
import { STATUS_LIST_OBJECT } from "./until/enum";
const emit = defineEmits(["refresh"]);
const isModalVisible = ref(false);
// 打开搜索模态框
const feedbackInfo = ref({});
const statusList = ref(Object.values(STATUS_LIST_OBJECT));
const status = ref(STATUS_LIST_OBJECT.processed.value);
function openModal(row) {
  feedbackInfo.value = Object.assign({}, row);
  feedbackInfo.value.files = JSON.parse(feedbackInfo.value.files);
  isModalVisible.value = true;
  status.value = feedbackInfo.value.status;
}
const handleSubmit = async () => {
  const params = {
    id: feedbackInfo.value.id,
    status: status.value,
  };
  if (feedbackInfo.value.reason) {
    params.reason = feedbackInfo.value.reason;
  }
  try {
    await FeedbackAPI.editFeedback(params);
    ElMessage.success("处理成功");
    closeModal();
    emit("refresh");
  } catch (error) {
    isModalVisible.value = false;
    console.log(error);
  }
};
const closeModal = () => {
  isModalVisible.value = false;
  feedbackInfo.value = {};
};
defineExpose({
  openModal,
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>
